<!--  -->
<template>
  <div class="nav flex justify-between aligin-center">
    <div>
      <slot name="left"></slot>
    </div>
    <span class="f-18" v-if="!selfCenter">{{title}}</span>
    <div v-else class="flex-1">
      <slot name="center"></slot>
    </div>
    <div>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  props: {
    selfCenter:{
      type:Boolean,
      default:()=>{
        return false
      }
    },
    title: {
      type: String,
      default: () => {
        return "title";
      }
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.nav {
  padding: 0 15px;
  box-sizing: border-box;
  height: 45px;
  .flex-1{
    margin: 0 20px;
    flex: 1;
  }
}
</style>